import { isMeById } from "@/utils/info"
import LoginButton from "../LoginButton"
import { ReactNode, useEffect, useMemo, useState } from "react"
import { useBoolean, useRequest } from "ahooks"
import { cancelFollowByUserId, followUserByUserId } from "@/services/user/user"
import { Button, message } from "antd"
type Props ={
    userId:string,
    isMeRender:ReactNode,
    isFollow:boolean
}

export  default ({
    userId,
    isMeRender,
    isFollow=false,
    onChange=()=>{},
}:Props) =>{
    const [flag,setFlag]= useState(false);
    const {run,loading} = useRequest(flag?cancelFollowByUserId:followUserByUserId,{
        manual:true,
        onSuccess:()=>{
           message.success(flag?'取消关注成功':'关注成功')
           onChange(!flag)
           setFlag(!flag)
        }
    })
    useEffect(()=>{
        setFlag(isFollow)
    },[isFollow])
    return <>
      <LoginButton text="关注" buttonStyle={{width:'100%'}}>
        {
                isMeById(userId) ? <>{isMeRender}</>:<>
                <Button style={{width:'100%'}} loading={loading} type={flag?'default':'primary'} onClick={(e)=>{
                    e.stopPropagation();
                    run(userId)
                }}>{flag?'已关注':'关注'}</Button>
                </>
            }
      </LoginButton>
    </>
}